<script lang="ts" setup>
// #region 引入包, 函数和组件
import type { Playlist, PlaylistItem } from "@/services/type"
import { useMusicStore } from "@/store";
import { ref } from "vue"
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const props = defineProps<{
  list: PlaylistItem[]
  data: Playlist | undefined
}>()
const music = useMusicStore()
// #endregion

// #region // 变量

// #endregion

// #region // 函数
// 播放或暂停
const playSong = () => {
  if (!music.song) return
  if (!music.song.data[0].url) return music.audio.pause()
  // console.log(music.playStatus)
  music.changeCanplay(true)
  if (music.playStatus) {
    music.audio.pause()
  } else {
    music.audio.play()
    // console.log('开始')
  }
}
// #endregion

// #region // 生命周期和vue函数

// #endregion
</script>

<template>
  <view class="list">
    <view class="all">
      <view class="bofangAll">
        <svg
          t="1750384805430"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6313"
        >
          <path
            d="M0 512a512 512 0 1 1 512 512A512 512 0 0 1 0 512z m64 0A448 448 0 1 0 512 64 448 448 0 0 0 64 512z m317.6448 198.587733a44.049067 44.049067 0 0 1-23.534933-39.355733V352.768a43.9808 43.9808 0 0 1 23.534933-39.355733 46.984533 46.984533 0 0 1 46.984533 0.1536L710.621867 472.746667a44.663467 44.663467 0 0 1 0 78.404266l-281.975467 159.232a47.0528 47.0528 0 0 1-46.984533 0.1536z"
            fill="#c84341"
            p-id="6314"
          ></path>
        </svg>
      </view>
      <view @click="music.onClickPlaySong(data?.tracks)">播放全部({{ data?.trackCount }})</view>
    </view>
    <view
      :class="['list_item', { active: music.currentIndex !== -1 && music.songsList[music.currentIndex].id === item.id }]"
      v-for="(item, index) in list"
      @click="music.onClickPlaySong(item)"
    >
      <view class="no">{{ index + 1 }}</view>
      <view class="item_name">{{ item.name }}</view>
      <view class="btn" @click="playSong">
        <view class="zanting" v-if="music.currentIndex !== -1 && music.songsList[music.currentIndex].id === item.id && music.playStatus">
          <svg t="1750465535689" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="4036" width="32" height="32">
            <path
              d="M512.862059 1023.999349A511.999674 511.999674 0 0 1 313.472753 40.078252a511.999674 511.999674 0 0 1 398.778611 942.840888 508.993805 508.993805 0 0 1-199.389305 41.080209z m0-943.842844C274.396457 80.156505 81.018889 273.534073 81.018889 511.999674s193.377568 431.84317 431.84317 431.84317 431.84317-194.379524 431.843169-431.84317S750.325704 80.156505 512.862059 80.156505z"
              fill="#ffffff" p-id="4037"></path>
            <path
              d="M395.63317 754.473101a40.078252 40.078252 0 0 1-40.078252-40.078252V332.649495a40.078252 40.078252 0 0 1 80.156505 0v381.745354a40.078252 40.078252 0 0 1-40.078253 40.078252zM634.098772 754.473101a40.078252 40.078252 0 0 1-40.078252-40.078252V332.649495a40.078252 40.078252 0 0 1 80.156505 0v381.745354a40.078252 40.078252 0 0 1-40.078253 40.078252z"
              fill="#ffffff" p-id="4038"></path>
          </svg>
        </view>
        <view class="bafang" v-else>
          <svg t="1750384805430" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="6313">
            <path
              d="M0 512a512 512 0 1 1 512 512A512 512 0 0 1 0 512z m64 0A448 448 0 1 0 512 64 448 448 0 0 0 64 512z m317.6448 198.587733a44.049067 44.049067 0 0 1-23.534933-39.355733V352.768a43.9808 43.9808 0 0 1 23.534933-39.355733 46.984533 46.984533 0 0 1 46.984533 0.1536L710.621867 472.746667a44.663467 44.663467 0 0 1 0 78.404266l-281.975467 159.232a47.0528 47.0528 0 0 1-46.984533 0.1536z"
              fill="#c84341" p-id="6314"></path>
          </svg>
        </view>
      </view>
      <view class="item_ar">{{ item.ar.map((v) => v.name).join("/") }}</view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.all {
  display: flex;
  align-items: center;
  height: 100rpx;
  color: rgba(0, 0, 0, 0.9);
  font-size: $uni-font-size-base;
  .bofangAll {
    margin: 0 20rpx 0 30rpx;
    height: 50rpx;
    svg {
      width: 50rpx;
      height: 50rpx;
    }
  }
}
.list_item {
  display: grid;
  padding: 24rpx;
  padding-left: 30rpx;
  grid-template-columns: 80rpx auto 72rpx;
  grid-template-rows: 38rpx 32rpx;
  grid-row-gap: 6rpx;
  border-top: 2rpx solid #f1f1f1;
  .no {
    grid-row: span 2;
    font-weight: 600;
    font-size: $uni-font-size-lg;
    color: rgba(0, 0, 0, 0.9);
    line-height: 80rpx;
    text-align: center;
  }
  .item_name,
  .item_ar {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .item_name {
    font-size: $uni-font-size-base;
    color: #3b4144;
  }
  .uni-icons {
    grid-row: span 2;
    display: flex;
    align-items: center;
    justify-content: end;
  }
  .btn {
    background: none;
    grid-row: span 2;
    width: 80rpx;
    height: 80rpx;
    display: flex;
    view {
      width: 50rpx;
      height: 50rpx;
      margin: auto;
    }
    svg {
      width: 50rpx;
      height: 50rpx;
      path {
        fill: #666;
      }
    }
  }
  &.active {
    view {
      color: #c84341 !important;
    }
    .btn svg path {
      fill: #c84341;
    }
    .no image {
      outline: 2rpx solid #c84341;
    }
  }
  .item_ar {
    font-size: $uni-font-size-sm;
    color: #999;
  }
}
</style>
